<template>
  <!-- 首页预览banner -->
  <el-card class="card-carousel">
    <!-- 4秒 -->
    <el-carousel class="push" :interval="4000" arrow="always">
      <el-carousel-item v-for="item in items" :key="item.id">
        <!-- 跳转外部链接 -->
        <a :href="item.tourl" target="_blank">
          <!-- 图片地址 -->
          <img :src="item.imageUrl" alt class="carousel_img" />
        </a>
        <!-- 描述/宣传语 -->
        <h3>{{item.slogan}}</h3>
      </el-carousel-item>
    </el-carousel>
  </el-card>
</template>

<script>
export default {
  name: 'Carousel',
  data: function () {
    return {
      items: [
        {
          id: 1,
          slogan: 'element-ui - 网站快速成型工具',
          imageUrl: 'http://qiniuyun.sailorj.top/20201109211037711000.png',
          tourl: 'http://how2j.cn?p=50613'
        },
        {
          id: 2,
          slogan: 'Vue.js - 渐进式 JavaScript 框架',
          imageUrl: 'http://qiniuyun.sailorj.top/20201109211058471001.png',
          tourl: 'https://cn.vuejs.org/'
        }
      ]
    }
  },
  mounted () {
    this.loadBanners()
  },
  methods: {
    loadBanners () {
      var _this = this
      this.$axios.post('/banner/findBannerByDisplay').then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.items = resp.data.result
        } else {
          this.$message('获取首页广告图片失败')
        }
      })
    }
  }
}
</script>

<style>
.el-carousel__item h3 {
  color: black;
  font-size: 15px;
  /*line-height: 300px;*/
  bottom: 43px;
  float: left;
  position: relative;
}

.card-carousel {
  /*margin: 0 auto;*/
  margin-left: 20px;
  width: 680px;
  height: 320px;
}

/* .push {
  margin-left: -15px;
} */

.el-carousel__item:nth-child(2n) {
  background: black;
}

.el-carousel__item:nth-child(2n + 1) {
  background: black;
}

.carousel_img {
  height: 100%;
  width: 100%;
  text-align: center;
}
</style>
